<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>成绩案例</title>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <div id="root">
        <table border="1" width="300" cellspacing="0">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>科目</th>
                    <th>成绩</th>
                    <th>删除</th>
                </tr>
            </thead>
            <!-- 使用v-if 如果数组有长度暂无数据隐藏 没长度暂无数据显示 -->
            <tbody align="center" v-if="list.length>0">
                <!-- 使用v-for遍历数组 -->
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.subject}}</td>
                    <!-- 小于60分的成绩要标红 -->
                    <td :class="{red:item.score<60}">{{item.score}}</td>
                    <!-- 给删除绑定点击事件 添加修饰符 prevent -->
                    <td><a @click.prevent="del(item.id)" href="#">删除</a></td>
                </tr>
            </tbody>
            <!-- 当我们有数据的时候 暂无数据隐藏 -->
            <tbody align="center" v-else>
                <tr>
                    <td colspan="4">暂无数据</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <!-- 使用计算属性求总分与平均分 -->
                    <td colspan="2">总分：{{totalPoints}}</td>
                    <td colspan="3">平均分：{{averageScore}}</td>
                </tr>
            </tfoot>
        </table>
        <div>
            <!-- 给input添加v-model -->
            姓名：<input type="text" placeholder="请输入姓名" v-model="nameText"><br>
            <!-- 科目去除两边空白 -->
            科目：<input type="text" placeholder="请输入科目" v-model.trim="subjectText"><br>
            <!-- 成绩是number 添加number修饰符 -->
            成绩：<input type="text" placeholder="请输入成绩" v-model.number="scoreText"><br>
            <!-- 给表格添加数据 设置点击事件 -->
            <input @click="add" type="button" value="提交">
        </div>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: "#root",
        data: {
            // 我们先存一个数组
            list: [
                { id: 1, name:'张三',subject: "语文", score: 60 },
                { id: 2, name:'李四',subject: "数学", score: 55 },
                { id: 3,name:'王五', subject: "英语", score: 90 }
            ],
            nameText:"",
            subjectText:"",
            scoreText:""
        },
        // 方法
        methods: {
            del(id){
                // 我们使用过滤filter 返回一个新数组 新数组覆盖原数组
                this.list = this.list.filter(item=>item.id !== id)
            },
            add(){
                // 添加科目不能为空 成绩不能为空 姓名不能为空
                if(!this.subjectText){
                  return  alert("请输入科目")
                    
                }else if(!this.scoreText){
                   return alert("请输入成绩")
                    
                }else if(!this.nameText){
                   return alert("请输入姓名")
                    
                }
                //成绩不能是字符串
                if(typeof this.scoreText !== "number") {
                   return alert("请输入正确的成绩")
                    
                }
                // 姓名不能为 数字
                if(typeof this.nameText !== "string") {
                    return alert("请输入正确的姓名")
                }
                this.list.push({
                    // 我们暂时拿时间戳做id
                    id:+new Date(),
                    name:this.nameText,
                    subject:this.subjectText,
                    score:this.scoreText
                })
                this.nameText=""
                this.subjectText=""
                this.scoreText = ""
            }
        },
        computed:{
            // 总分
            totalPoints(){
                // 使用reduce
                return this.list.reduce((sum,item)=>item.score + sum,0)
            },
            // 平均分
            averageScore(){
                if(this.list.length == 0){
                    return 0
                }
                // 保留2位小数
                return (this.totalPoints / this.list.length).toFixed(2)
            }
        }
   })
</script>
</html>